<template>
  <div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
     <van-list v-model="loading" :finished='finished' finished-text="没有更多了" @load="onload" :immediate-check='false'>
      <art-item v-for="item in artlist" :key="item.art_id.toString()" :article="item" @remove-article='removeArticle'></art-item>
     </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import { getArtListAPI } from '@/api/homeAPI.js'
import ArtItem from '@/components/ArtItem/ArtItem.vue'

export default {

  name: 'ArtList',
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      artlist: [],
      loading: false,
      finished: false,
      isRefresh: false
    }
  },
  created () {
    this.initArtList()
  },
  methods: {
    async initArtList (state) {
      const { data: res } = await getArtListAPI(this.channelId)
      if (res.message === 'OK') {
        if (state) {
          // 数据拼接，每次下拉刷新显示加载的内容
          this.artlist = [...res.data.results, ...this.artlist]
          // ！！！isRefresh改为false，才能触发下次的刷新事件，否则不执行
          this.isRefresh = false
        } else {
          this.artlist = [...this.artlist, ...res.data.results]
          // ！！！loading改为false，才能触发下次的load事件，否则不执行
          this.loading = false
        }

        // 数据拼接，每次上拉加载显示加载的内容

        if (res.data.results.length === 0) {
          this.finished = true
        }
      }
    },
    onload () {
      this.initArtList()
    },
    onRefresh () {
      console.log(212)
      this.initArtList(true)
    },
    // 触发了子组件的不感兴趣删除操作，根据
    removeArticle (id) {
      this.artlist = this.artlist.filter(item => item.art_id.toString() !== id)
      // 如果文章长度
      if (this.artlist.length < 10) {
        this.initArtList()
      }
    }
  },
  components: {
    ArtItem
  }
}
</script>

<style lang="less" scoped>
</style>
